import React from 'react';
import QueueAnim from 'rc-queue-anim';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { withRouter, Route } from 'react-router-dom';
import { Flex, WhiteSpace, List, WingBlank, Tools, Badge, Avatar } from 'weaver-mobile';
import { ListPage } from 'weaver-mobile-page';
import { renderLoading } from '../public/BlogUtils';
import Visitor from './Visitor';
import HisBlogRoute from '../hisBlog/HisBlogRoute';
import BlogAttention from './blogAttention';
import MyFans from './MyFans';
import ShareToMe from './shareToMe';
const Item = List.Item;
const getLabel = Tools.getLabel;
const store = [
  'blogHomeStore',
  'userCenterStore',
  'blogCommentStore',
    'blogAttentionStore'
];

@withRouter
@inject(...store)
@observer
export default class UserCenter extends React.Component {
  static defaultProps = {
    prefixCls: 'blog-center'
  }

	constructor(props) {
    super(props);
    this.state = {
			cardType: 1,
      userId: '', // 跳转他的微博需要传的id 
		}
  }

	componentDidMount() {
		const { userCenterStore } = this.props;
    userCenterStore.initData();
    this.props.blogHomeStore.setState({hidden: false});
  }

  componentWillUnmount() {
    const { userCenterStore } = this.props;
    userCenterStore.userClear();
  }

  // 设置跳转他的微博需要传的id 
  setUid = (id, callback) => {
    this.setState({ userId: id }, () => {
      if (callback) callback();
    })
  }

  getTemplate = () => {
    const listStyle = 'blog-list-line';
    const newTemp = {
      default: [{
        key: 'col_1',
        render: (data) => {
          const { imageUrl, lastname, visitdatetime,userid } = data;
          return (
            <div className={listStyle}>
              <div className={`${listStyle}-userInfo`}>
                <Avatar userId={userid} style={{width:40, height:40}} />
                <div className={`${listStyle}-userInfo-content`}>
                  <span className='lastName text-wrap'>{lastname}</span>
                  <span className='time'>{visitdatetime}</span>
                </div>
              </div>
            </div>
          )
        }
      }]
    }
    return newTemp;
  }

  visitorList = (datas) => {
    const fields = [];
    toJS(datas).forEach((item) => {
      fields.push(<ListPage.Item
        key={item.userid}
        data={item}
        getTemplate={this.getTemplate}
        onClick={() => {
          this.setUid(item.userid, () => {
            this.props.history.push("/userCenter/hisBog/hisBlog/" + item.userid);
          })
        }}
      />);
    })
    return fields;
  }


  //便签入口
    getBlogNote = () => {
       const {blogCommentStore:{blogNoteDemo}} = this.props;
       this.props.history.push({pathname:'/myBlog/writeBlogNote',state:'bianqian'});
       // blogNoteDemo();
    }

  render() {
    const wrapCls = 'blog-userCenter';
    const { prefixCls,blogAttentionStore:{setType}, userCenterStore:{ userInfo, menuCountData, visitorList, accessList, isLoading }, blogHomeStore: { setActiveKey } } = this.props;
    let basicInfoCard = [
      // {
      //     id: 1,
      //     name: getLabel(26468, '我的微博'),
      //     value: menuCountData.blogCount,
      //     color: '#4E91FE',
      //     onClick: () => {
      //       this.setState({
			// 				cardType: 1
			// 			});
      //       setActiveKey(0);
      //       this.props.history.push('/myBlog');
      //     },
      // },
      {
        id: 2,
        name: getLabel(26469, '我的关注'),
        value: menuCountData.myAttentionCount,
        color: '#32BC40',
        onClick: () => {
          this.setState({
						cardType: 2
          });
          this.props.blogHomeStore.setState({hidden: true});
          setActiveKey(2);
          this.props.history.push('/userCenter/blogAttention/attention');
        },
      },
      {
        id: 3,
        name: getLabel(387981, '我的粉丝'),
        value: menuCountData.attentionMeTotalCount,
        color: '#cc31ff',
        onClick: () => {
          this.setState({
            cardType: 3,
          });
          this.props.history.push('/userCenter/myFans');
        }
      },
      {
        id: 4,
        name: getLabel(513653, '分享给我'),
        value: menuCountData.shareToMeUserCount,
        color: '#FF6699',
        onClick: () => {
            setType("share");
          this.setState({
            cardType: 5,
          });
          this.props.history.push('/userCenter/shareToMe/shareToMe');
        }
      }
    ]

    return isLoading ? renderLoading : (
      <div className={`${prefixCls} ${wrapCls}`}> 
        <div className={`${prefixCls}-userInfo`}>
          <WingBlank>
            <Avatar userId={userInfo.id}/>
            <div className={`${prefixCls}-userInfo-info`}>
              <div className={`${prefixCls}-userInfo-info-name`}>{userInfo.lastname}</div>
              <div className={`${prefixCls}-userInfo-info-title`}>{userInfo.departmentName}&nbsp;&nbsp;{userInfo.jobtitle}</div>
            </div>
          </WingBlank>
        </div>

        <Flex className={`${prefixCls}-userCount`}>
          {
            basicInfoCard.map((item,key) => {
              return (<Flex.Item key={item.id} onClick={item.onClick}>
                <div className={`${prefixCls}-userCount-item`}>
                  <span className={`${prefixCls}-userCount-item-value`} style={{color: item.color}}>{item.value}</span>
                  <span className={`${prefixCls}-userCount-item-name`}>{item.name}</span>
                </div>
                <div className={`${prefixCls}-userCount-line`}></div>
              </Flex.Item>)
            })
          }
        </Flex>
        <WhiteSpace size='sm' />

        <List className={`${prefixCls}-userSetting`}>
        <Item arrow='horizontal'
            extra={menuCountData.blogCount}
            onClick={() => {
              this.setState({
                cardType: 1
              });
              setActiveKey(0);
              this.props.history.push('/myBlog');
            }}>{getLabel(26468, '我的微博')}</Item>

          <Item arrow='horizontal'
            extra={<Badge text={menuCountData.remindCount} />}
            onClick={() => {
              this.props.history.push('/userCenter/msgRemind');
            }}>{getLabel(19085 ,'消息提醒')}</Item>
            <Item arrow='horizontal'
                  onClick={this.getBlogNote}
            >{getLabel(33304,'微博便签')}</Item>
          <Item arrow='horizontal'
            onClick={() => this.props.history.push('/userCenter/setting')}
          >{getLabel(26630 ,'微博设置')}</Item>
          <Item arrow='horizontal'
            onClick={() => this.props.history.push('/userCenter/setting/shareSet')}
          >{getLabel(26945 ,'分享设置')}</Item>

        </List>
          
        {visitorList && visitorList.length > 0 && <WhiteSpace size='sm' />}
        {visitorList && visitorList.length > 0 && (
          <List className={`${prefixCls}-userVisitor`}>
            <Item arrow='horizontal' 
              className={`${prefixCls}-userVisitor-title`} 
              onClick={() => { visitorList.length>0 && this.props.history.push('/userCenter/visitor') }}>
              {getLabel(26934 ,'最近来访')}
            </Item>
          </List>
        )}
        {visitorList && visitorList.length > 0 && (
          <div className={`${prefixCls}-userVisitor-content`}>
            {this.visitorList(visitorList)}
          </div>
        )}

        {accessList && accessList.length > 0 && <WhiteSpace size='sm' />}
        {accessList && accessList.length > 0 && (
          <List className={`${prefixCls}-userVisitor`}>
            <Item arrow='horizontal'
              className={`${prefixCls}-userVisitor-title`} 
              onClick={() => { accessList.length > 0 && this.props.history.push('/userCenter/access') }}>
              {getLabel(26935 ,'最近访问')}
            </Item>
          </List>
        )}
        {accessList && accessList.length > 0 && (
          <div className={`${prefixCls}-userVisitor-content`}>
            {this.visitorList(accessList)}
          </div>
        )}
        <WhiteSpace />
        
        <Route 
          key="userCenter-blogAttention"
          path="/userCenter/blogAttention"
          breadcrumbName="个人中心-我的关注"
          render={() => (
            <div className="wm-route-layout" style={{ position: 'fixed' }}>
              <QueueAnim >
                <BlogAttention parentPath="/userCenter/blogAttention" key="attention" />
              </QueueAnim>
            </div>
          )}
        />

      <Route 
          key="userCenter-shareToMe"
          path="/userCenter/shareToMe"
          breadcrumbName="个人中心-分享给我"
          render={() => (
            <div className="wm-route-layout" style={{ position: 'fixed' }}>
              <QueueAnim >
                <ShareToMe parentPath="/userCenter/shareToMe" key="shareToMe" />
              </QueueAnim>
            </div>
          )}
        />

        <Route 
          key="userCenter-myFans"
          path="/userCenter/myFans"
          breadcrumbName="个人中心-我的粉丝"
          render={() => (
            <div className="wm-route-layout" style={{ position: 'fixed' }}>
              <QueueAnim >
                <MyFans parentPath="/userCenter/myFans" key="myFans" />
              </QueueAnim>
            </div>
          )}
        />
        <Route 
          key="userCenter-visitor"
          path="/userCenter/visitor"
          breadcrumbName="个人中心-最近来访"
          render={() => (
            <div className="wm-route-layout" style={{ position: 'fixed' }}>
              <QueueAnim>
                <Visitor key="visitor" setUid={this.setUid} parentPath="/userCenter/visitor" />
              </QueueAnim>
            </div>
          )}
        />
        <Route 
          key="userCenter-access"
          path="/userCenter/access"
          breadcrumbName="个人中心-最近访问"
          render={() => (
            <div className="wm-route-layout" style={{ position: 'fixed' }}>
              <QueueAnim>
                <Visitor key="access" setUid={this.setUid} parentPath="/userCenter/access" />
              </QueueAnim>
            </div>
          )}
        />
        <HisBlogRoute path="/userCenter/visitor/hisBlog" userId={this.state.userId}/>
        <HisBlogRoute path="/userCenter/access/hisBlog" userId={this.state.userId}/>
        <HisBlogRoute path="/userCenter/hisBog/hisBlog" userId={this.state.userId}/>
      </div>
    )
  }
}